<template>
	<view class="con">
		<view class="title">
			<view class="title__line">

			</view>
			地址信息
		</view>
		<view class="content">
			{{addressData.name}} </br>
			{{addressData.phone}} </br>
			{{addressData.details}}
		</view>
		<u-textarea v-model="addr" placeholder="试试粘贴收件人姓名/手机号/收货地址，可快速识别您需要回收的地址"></u-textarea>
		<view class="btn" v-if="addr">
			<!-- <u-button text="识别"></u-button> -->
			<u-button text="识别" @click="pasteContent" color="#3262FD" size="mini" :customStyle="{width:'100rpx',margin:'5rpx'}" shape='circle'></u-button>
			<u-button text="清除" @click="addr=''" color="#ccc" size="mini" :customStyle="{width:'100rpx',margin:'5rpx'}" shape='circle'></u-button>
			<!-- <u-button text="清除" size="mini"></u-button> -->
		</view>
		<view class="footer">
			<view class="footer__btn" @click="clickhs">
				确认回收
			</view>
		</view>
	</view>
</template>

<script>
	import {circle} from '@/api/home.js'
	export default {
		data() {
			return {
				addressData: {
					name: '',
					phone: '',
					details: '', //详细地址
				},
				addr:''
			};
		},
		methods: {
			clickhs() {
				if(!this.addressData.details){
					uni.showToast({
						title:'请粘贴回收地址',
						icon:'none'
					})
					return
				}
				uni.showLoading({
					title:'正在回收'
				})
				circle({address:this.addressData.details}).then(res=>{
					if(res.data.code==1){
						uni.showToast({
							title:'回收成功'
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}
				})
			},
			pasteContent() {
				var that = this
				if(!this.addr){
					uni.showToast({
						title:'请粘贴回收地址',
						icon:'none'
					})
					return
				}
				const text = that.addr;
				const phoneNumber = this.extractPhoneNumber(text);
				const name = this.extractName(text, phoneNumber);
				const address = this.extractAddress(text, phoneNumber);
				
				// 去除特殊字符和前缀标识
				const cleanedName = this.cleanText(name);
				const cleanedPhoneNumber = this.cleanText(phoneNumber);
				const cleanedAddress = this.cleanText(address);
				console.log('姓名:', cleanedName);
				console.log('手机号:', cleanedPhoneNumber);
				console.log('收货地址:', cleanedAddress);
				if (cleanedName != '') {
					that.addressData.name = cleanedName
				}else{
					uni.showToast({
						title:'抱歉，没识别成功哦',
						icon:'none'
					})
					return
				}
				if (cleanedPhoneNumber != '') {
					that.addressData.phone = cleanedPhoneNumber
				}else{
					uni.showToast({
						title:'抱歉，没识别成功哦',
						icon:'none'
					})
					return
				}
				if (cleanedAddress != '') {
					that.addressData.details = cleanedAddress
				}else{
					uni.showToast({
						title:'抱歉，没识别成功哦',
						icon:'none'
					})
					return
				}
				this.addr=''
			},
			//1姓名
			extractPhoneNumber(text) {
				const reg = /\d{11}/;
				const match = text.match(reg);
				const phoneNumber = match ? match[0] : '';
				return phoneNumber;
			},
			//2手机号
			extractName(text, phoneNumber) {
				const index = text.indexOf(phoneNumber);
				const name = index > 0 ? text.substring(0, index).trim() : '';
				return name;
			},
			//3地址
			extractAddress(text, phoneNumber) {
				const index = text.indexOf(phoneNumber);
				const address = index > 0 ? text.substring(index + phoneNumber.length).trim() : '';
				return address;
			},
			// 4去除特殊字符和前缀标识
			cleanText(text) {
				const cleanedText = text.replace(/\/|姓名：|手机号：|收货地址：|地址：/g, '');
				return cleanedText;
			},
		},
		onLoad() {
			this.id=uni.getStorageSync('hsid')
		}
	}
</script>

<style lang="scss">
	.con {
		border-top: 2rpx solid #F0EEEE;
		padding: 50rpx 30rpx;
	}

	.title {
		display: flex;
		align-items: center;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #1E1E1E;
		line-height: 26rpx;

		&__line {
			width: 5rpx;
			height: 24rpx;
			background: #3262FD;
			margin-right: 10rpx;
		}
	}

	.content {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #010101;
		line-height: 48rpx;
		margin-top: 30rpx;
	}

	.footer {
		padding: 70rpx 60rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		&__btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 628rpx;
			height: 94rpx;
			background: #3262FD;
			border-radius: 15rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 32rpx;
		}

	}
	.btn{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 10rpx;
	}
</style>